<template>
  <view class="index">
    <image class="bg" src="./static/bg.jpg" mode="aspectFill"></image>
    <view class="ind_from">
      <view v-if="!showResult">
        <view class="row">
          <text class="h1">人体基础代谢计算器</text>
        </view>
        <view class="row gender-row">
          <view
            class="gender-btn male"
            :class="{ active: formData.gender == 1 }"
            @click="selectGender(1)"
          >
            <image src="./static/male.png" mode="widthFix" class="ico"></image>男
          </view>
          <view
            class="gender-btn female"
            :class="{ active: formData.gender == 0 }"
            @click="selectGender(0)"
          ><image src="./static/female.png" mode="widthFix" class="ico"></image>女</view>
        </view>
        <view class="flex">
          <view class="left">
            <view class="row input-row">
              <view class="input-header">
                <view class="input-icon height"></view>
                <view class="input-text">身高(cm)：</view>
              </view>
              <input
                class="input"
                v-model="formData.height"
                type="number"
                maxlength="3"
                placeholder="请输入身高"
              />
            </view>
            <view class="row input-row">
              <view class="input-header">
                <view class="input-icon weight"></view>
                <view class="input-text">体重(kg)：</view>
              </view>
              <input
                class="input"
                v-model="formData.weight"
                type="number"
                maxlength="3"
                placeholder="请输入体重"
              />
            </view>
            <view class="row input-row">
              <view class="input-header">
                <view class="input-icon age"></view>
                <view class="input-text">年龄(岁)：</view>
              </view>
              <input
                class="input"
                v-model="formData.age"
                type="number"
                maxlength="2"
                placeholder="请输入年龄"
              />
            </view>
          </view>
          <view class="right">
            <view class="row activity-row">
              <view class="activity-title">运动频率：</view>
              <view
                v-for="(item, index) in activityList"
                :key="index"
                class="activity-radio"
                :class="{ active: formData.activity == item.value }"
                @click="formData.activity = item.value"
              >{{ item.label }}</view>
            </view>
          </view>
        </view>
        <view class="submit_btn" @click="submit">计算</view>
      </view>
      <view v-else class="result">
        <view class="row">
          <text class="h1">根据您的基础数据估算</text>
        </view>
        <view class="row">
          <view class="result_panel1">
            <view class="item">
              <view class="value">{{ formData.height || 0 }}</view>
              <view class="label">身高(cm)</view>
            </view>
            <view class="item">
              <view class="value">{{ formData.gender == 1 ? "男" : "女" }}</view>
              <view class="label">性别</view>
            </view>
            <view class="item">
              <view class="value">{{ formData.weight || 0 }}</view>
              <view class="label">体重(kg)</view>
            </view>
            <view class="item">
              <view class="value">{{ formData.age || 0 }}</view>
              <view class="label">年龄</view>
            </view>
          </view>
          <view class="result_panel2">
            <view class="item">
              <view class="image">
                <image src="./static/result_ico1.png" mode="widthFix" class="ico"></image>
              </view>
              <view class="value" :class="{'red': result.bmi > 24.9}">{{ result.bmi || 0 }}</view>
              <view class="label">身体质量指数(BMI)</view>
            </view>
            <view class="item">
              <view class="image">
                <image src="./static/result_ico2.png" mode="widthFix" class="ico"></image>
              </view>
              <view class="value">{{ result.bmr || 0 }}</view>
              <view class="label">基础代谢(BMR)</view>
            </view>
            <view class="item">
              <view class="image">
                <image src="./static/result_ico3.png" mode="widthFix" class="ico"></image>
              </view>
              <view class="value">{{ result.tdee || 0 }}</view>
              <view class="label">每日热量总消耗(cal)</view>
            </view>
            <view class="item">
              <view class="image">
                <image src="./static/result_ico4.png" mode="widthFix" class="ico"></image>
              </view>
              <view class="value">{{ activityList.find(item => item.value == formData.activity).label || "--" }}</view>
              <view class="label">运动强度</view>
            </view>
            <view class="item">
              <view class="image">
                <image src="./static/result_ico5.png" mode="widthFix" class="ico"></image>
              </view>
              <view class="value" :class="{'red': result.bodyFatPercentage > (formData.gender == 1 ? 25 : 30)}">{{ result.bodyFatPercentage || 0 }}%</view>
              <view class="label">体脂率</view>
            </view>
            <view class="item">
              <view class="image">
                <image src="./static/result_ico6.png" mode="widthFix" class="ico"></image>
              </view>
              <view class="value" :class="{'red': result.fatLevel === '超重' || result.fatLevel === '肥胖'}">{{ result.fatLevel || "--" }}</view>
              <view class="label">肥胖等级</view>
            </view>
          </view>
        </view>
        <view class="row desc">
          <text class="label" :class="{'red': result.bmr < 1500 || result.bmr > 1800, 'green': result.bmr > 1500 && result.bmr < 1800}">{{ result.label || "--" }}</text>
          <text class="strong">{{ result.suggest || "----" }}</text>
        </view>
        <view class="submit_btn" @click="reset">重新输入</view>
      </view>
    </view>
    <button class="share" open-type="share">分享</button>
    <view class="pub_ad_banner">
      <!-- #ifdef MP-TOUTIAO -->
      <ad
        :unit-id="adBannerIdDouyin"
        :ad-intervals="30"
        :fixed="false"
        type="banner"
        scale="100"
      />
      <!-- #endif -->
      <!-- #ifdef MP-KUAISHOU -->
      <ad :type="100011054" :unit-id="adBannerIdKuaishou"></ad>
      <!-- #endif -->
    </view>
    <view class="ind_from pub_desc">
      <view class="h1">BMR（基础代谢率）</view>
      <view class="desc">基础代谢率(Basal Metabolic Rate)是指人体在静息状态下维持基本生命活动所需的最低能量消耗。</view>
    </view>
    <view class="ind_from refer_table">
      <view class="h1">BMR标准对照表</view>
      <view class="row th">
        <view class="col col1">年龄</view>
        <view class="col col2">男</view>
        <view class="col col3">女</view>
      </view>
      <view class="row">
        <view class="col col1">18-29岁</view>
        <view class="col col2">1650</view>
        <view class="col col3">1310</view>
      </view>
      <view class="row">
        <view class="col col1">30-49岁</view>
        <view class="col col2">1600</view>
        <view class="col col3">1270</view>
      </view>
      <view class="row">
        <view class="col col1">50-69岁</view>
        <view class="col col2">1450</view>
        <view class="col col3">1210</view>
      </view>
      <view class="row">
        <view class="col col1">70岁以上</view>
        <view class="col col2">1320</view>
        <view class="col col3">1110</view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  showAdConfirmModal,
  adVideoCreate,
  adVideoShow,
  adBannerIdDouyin,
  adBannerIdKuaishou,
} from "@/common/ad";
export default {
  data() {
    return {
      banner: null,
      adBannerIdDouyin: adBannerIdDouyin,
      adBannerIdKuaishou: adBannerIdKuaishou,
      showResult: false,
      isUnlock: false,
      activityList: [
        {
          label: "轻度(办公室工作)",
          value: 1,
        },
        {
          label: "中度(每周3-5次)",
          value: 2,
        },
        {
          label: "高度(每天频繁)",
          value: 3,
        },
      ],
      formData: {
        weight: "60",
        height: "170",
        age: "20",
        gender: 1,
        activity: 1,
      },
      result: {
        bmr: 0,
        bmi: 0,
        tdee: 0,
        bodyFatPercentage: 0,
        fatLevel: "",
        label: "",
        suggest: "",
      },
    };
  },
  onLoad() {
    adVideoCreate();
  },
  methods: {
    selectGender(val) {
      this.formData.gender = val;
    },
    reset(){
      this.showResult = false;
    },
    calculate() {
      let bmr = "";
      let label = "";
      let suggest = "";
      if (this.formData.gender == 1) {
        bmr =
          10 * this.formData.weight +
          6.25 * this.formData.height -
          5 * this.formData.age +
          5;
        if (bmr < 1500) {
          label = "代谢偏低";
          suggest = "基础代谢率低于正常范围，可能存在肌肉量不足或代谢缓慢情况";
        } else if (bmr > 2000) {
          label = "代谢偏高";
          suggest = "基础代谢率高于平均水平，常见于肌肉量较高或特殊生理状态";
        } else {
          label = "代谢正常";
          suggest = "基础代谢率处于健康范围，请继续保持良好生活习惯";
        }
      } else {
        bmr =
          10 * this.formData.weight +
          6.25 * this.formData.height -
          5 * this.formData.age -
          161;
        if (bmr < 1300) {
          label = "代谢偏低";
          suggest = "基础代谢率低于正常范围，可能存在肌肉量不足或代谢缓慢情况";
        } else if (bmr > 1800) {
          label = "代谢偏高";
          suggest = "基础代谢率高于平均水平，常见于肌肉量较高或特殊生理状态";
        } else {
          label = "代谢正常";
          suggest = "基础代谢率处于健康范围，请继续保持良好生活习惯";
        }
      }

      let heightInMeters = this.formData.height / 100;
      let bmi = this.formData.weight / (heightInMeters * heightInMeters);
      let fatLevel = "正常体重";
      if (bmi < 18.5) {
        fatLevel = "体重不足";
      } else if (bmi >= 18.5 && bmi < 24.9) {
        fatLevel = "正常体重";
      } else if (bmi >= 24.9 && bmi < 29.9) {
        fatLevel = "超重";
      } else {
        fatLevel = "肥胖";
      }

      // 计算体脂率
      let bodyFatPercentage = 0;
      if (this.formData.gender == 1) {
        // 男性体脂率计算公式
        bodyFatPercentage = (1.2 * bmi) + (0.23 * this.formData.age) - 16.2;
      } else {
        // 女性体脂率计算公式
        bodyFatPercentage = (1.2 * bmi) + (0.23 * this.formData.age) - 5.4;
      }

      // 计算每日热量总消耗(TDEE)
      // 根据活动水平设置活动系数
      let activityMultiplier = 1.2; // 默认轻度活动
      if (this.formData.activityLevel === 'sedentary') {
        activityMultiplier = 1.2; // 久坐不动
      } else if (this.formData.activityLevel === 'light') {
        activityMultiplier = 1.375; // 轻度活动
      } else if (this.formData.activityLevel === 'moderate') {
        activityMultiplier = 1.55; // 中度活动
      } else if (this.formData.activityLevel === 'active') {
        activityMultiplier = 1.725; // 重度活动
      } else if (this.formData.activityLevel === 'very_active') {
        activityMultiplier = 1.9; // 极重度活动
      }

      let tdee = bmr * activityMultiplier;
      this.result.bmi = bmi.toFixed(2);
      this.result.fatLevel = fatLevel;
      this.result.bmr = bmr.toFixed(2);
      this.result.label = label;
      this.result.suggest = suggest;
      this.result.bodyFatPercentage = bodyFatPercentage.toFixed(2);
      this.result.tdee = tdee.toFixed(2);
      this.showResult = true;
    },
    getResult() {
      this.calculate();
      this.isUnlock = true;
    },
    submit() {
      if (this.formData.height == "") {
        this.global.toast("请输入身高");
        return;
      }
      if (this.formData.weight == "") {
        this.global.toast("请输入体重");
        return;
      }
      if (!this.isUnlock) {
        showAdConfirmModal(() => {
          try {
            adVideoShow(() => {
              this.getResult();
            });
          } catch (error) {
            this.getResult();
          }
        });
      } else {
        this.getResult();
      }
    },
  },
};
</script>

<style scoped lang="scss">
.banner {
  display: block;
  width: 100%;
}
.pub_radio {
  position: relative;
  padding-left: 50rpx;
}
.pub_radio:before {
  position: absolute;
  top: 50%;
  margin-top: -20rpx;
  left: 0;
  content: "";
  width: 40rpx;
  height: 40rpx;
  background-image: url("@/static/img/checked.png");
  background-size: cover;
}
.pub_radio.active:before {
  background-image: url("@/static/img/checked_active.png");
  background-size: cover;
}
.gender-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  .gender-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    text-align: center;
    padding: 12px 0;
    border-radius: 16px;
    background: #f5f5f5;
    // margin: 0 8px;
    font-size: 20px;
    cursor: pointer;
    border: 2px solid transparent;

    &:first-child{
      margin-right: 10px;
    }

    .ico{
      height: 20px !important;
      width: 20px !important;
      margin-right: 5px;
    }
    &.male.active{
      background: #d1ebf9;
      border: 2px solid #1296db;
    }
    &.female.active{
      background: #f2d1e1;
      border: 2px solid #d4237a;
    }
  }
}
.ind_from{
  backdrop-filter: blur(10px);
  padding: 10px 10px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.4);
  margin-bottom: 10px;
  // &:last-child{
  //   margin-bottom:0;
  // }
  .h1{
    color: #fff;
    font-size: 22px;
    margin-bottom: 10px;
    text-align: center;
    display: block;
  }
}
.share{
  margin-top: 10px;
  background: #ffa242;
  color: #fff;
}
.index{
  padding: 10px;
  background: url("./static/bg.jpg") no-repeat center center;
  background-size: 100% 100%;
  height: 100vh;
  box-sizing: border-box;
  overflow-y: scroll;
  .bg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
  }
}
.flex{
  display: flex;
  justify-content: space-between;
  // align-items: center;
  .left{
    width: 44%;
  }
  .right{
    width: 60%;
  }
}
.input-header{
  display: flex;
  align-items: center;
  .input-icon{
    flex-shrink: 0;
  }
}
.input-text{
  font-size: 16px;
  font-weight: bold;
}
.input-row {
  background: #fff;
  border-radius: 16px;
  margin-bottom: 10px;
  padding: 12px 10px;

  &:last-child{
    margin-bottom: 0;
  }
  .input-icon {
    width: 30px;
    height: 30px;
    margin-right: 12px;
    border-radius: 50%;
    background: #8bbf43;
    &.height { background: #8bbf43 url("./static/height.png") no-repeat center center; background-size: 70%;}
    &.weight { background: #8bbf43 url("./static/weight.png") no-repeat center center; background-size: 70%;}
    &.age { background: #8bbf43 url("./static/age.png") no-repeat center center; background-size: 70%; }
  }
  .input {
    flex: 1;
    border: none;
    font-size: 16px;
    padding: 5px 5px;
    text-align: center;
    margin-top: 5px;
    background: #ededed;
    border-radius: 5px;
  }
}
.activity-row {
  background: #f5fff5;
  border-radius: 16px;
  padding: 18px 10px;
  margin-left: 10px;
  height: 274px;
  .activity-title {
    font-weight: bold;
    margin-bottom: 12px;
    font-size: 16px;
  }
  .activity-radio {
    margin-bottom: 14px;
    padding: 8px 12px;
    border-radius: 12px;
    background: #f2f2f2;
    border: 2px solid transparent;
    cursor: pointer;
    font-size: 16px;
    &.active {
      background: #e6ffe6;
      color: #00c853;
      border: 2px solid #00c853;
    }
  }
}
.submit_btn {
  margin-top: 30rpx;
  background: #8bbf43;
  color: #fff;
  text-align: center;
  padding: 14rpx 0;
  border-radius: 10rpx;
  // position: fixed;
  // bottom: 2%;
  // left: 4%;
  // width: 92%;
}
.sub_text {
  text-align: center;
  padding-top: 30rpx;
  font-size: 24rpx;
  color: #666;
  .bold {
    font-weight: bold;
  }
}
.pub_ad_banner {
  margin-top: 30rpx;
}
.pub_desc{
  .desc{
    color: #fff;
    font-size: 16px;
  }
}
.refer_table{
  color: #fff;
  font-size: 16px;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
  .row{
    display: flex;
    justify-content: center;
    align-items: center;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    border-top: 1px solid #fff;
    &:last-child{
      border-bottom: 1px solid #fff;
    }
    .col{
      width: 100%;
      text-align: center;
      padding: 6px 4px;
      border-right: 1px solid #fff;
      &:last-child{
        border-right: none;
      }
    }
  }
  .th{
    background: #8bbf43;
  }
}
.result_panel1{
  background: #fff;
  padding: 10px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 5px;
  .item{
    font-size: 14px;
    text-align: center;
    width: 100%;
    border-right: 1px solid #ccc;

    &:last-child{
      border-right: none;
    }

    .value{
      color: #8bbf43;
      font-weight: bold;
    }
    .label{

    }
  }
}
.result_panel2{
  margin-top: 10px;
  .item{
    float: left;
    width: 43%;
    background: #fff;
    margin-left: 3%;
    margin-right: 4%;
    margin-top: 4%;
    padding: 10px 10px;
    box-sizing: border-box;
    border-radius: 10px;
    text-align: center;
    font-size: 14px;
    .image{
      width: 30px;
      height: 30px;
      margin: 0 auto 5px auto;
      background: #8bbf43;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      .ico{
        width: 20px;
        height: 20px;
      }
    }
    .value{
      color: #8bbf43;
      font-weight: bold;
    }
    .red{
      color: red;
    }
    .yellow{
      color: #ff9800;
    }
    &:nth-of-type(2n){
      margin-right: 0;
    }
  }
  &:after{
    clear: both;
    display: block;
    content: "";
  }
}
.result {
  margin-top: 10px;

  .left,
  .right {
    width: 100%;
    padding: 10px 10px;
    background: #6f6fff;
    color: #fff;
  }

  .left {
    margin-right: 10px;
  }

  .p {
    display: block;

    .strong {
      font-size: 30px;
      display: inline-block;
      margin-right: 6px;
    }
  }

  .title {
    text-align: center;
    font-size: 30px;
  }
  .desc {
    margin-top: 10px;
    background: #fff;
    padding: 10px 10px;
    border-radius: 10px;
    font-size: 18px;
    text-align: center;
    .label{
      display: block;
      font-size: 24px;
      text-align: center;
      margin-bottom: 10px;
    }
    .red{
      color: #ff0000;
    }
    .green{
      color: #00c853;
    }
  }
}
</style>